<template>
	<view style="margin-top: 100rpx;">
		<!-- 出差申请审批 -->
		<view class="head_tb" v-if="!listTrip">
			<u-tabs :activeStyle="{
						 fontSize:'32rpx',
						 color: '#007aff'
			         }" :inactiveStyle="{
						 fontSize:'30rpx'
			         }" :scrollable='false' :lineWidth='30' itemStyle='height:90rpx;width:33%' :list="list1"
				@click="checkbtn"></u-tabs>
		</view>
		<view class="formcard" v-if="travelAppLsit.changeReasion" >
			<view class="bodtitle" style='border-bottom: none;display: flex;justify-content: space-between;'>
				<p style='flex: 3;'><b>是否取消出差</b><span style='color: red;'><b>*</b></span></p>
				<radio-group @change="radioChange"  style="display: flex;justify-content: space-between;flex: 2;">
					<label v-for="(item, index) in items" :key="item.value">
						<view>
							<radio style="transform: scale(.7);" :value="item.value" :checked="index == isCancel" disabled/>
							<view style="display: inline-block;padding-right: 10rpx;">
								<p>{{item.name}}</p>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		
		<!-- 多行文本 -->
		<view class="formcard" v-if="travelAppLsit.changeReasion">
			<view class="bodtitle" style="border-bottom: none;">
				<p><b>变更说明<span style='color: red;'><b>*</b></span></b></p>
			</view>
			<view class="textarea" style="padding: 20rpx 20rpx;" >
					<u--textarea maxlength='100' count v-model="travelAppLsit.changeReasion" border='none' disabled
						placeholder="请输入出差变更原因"></u--textarea>
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="msp">
			<CellChild :addlist='addlist' :rows='travelAppLsit' title='基本信息' isshow='true' id='add_one'>
				<template #fj>
					<view class="bod_cost" v-if="!!rows.fileNameList">
						<view class="bus">
							<span>附件</span>
						</view>
						<p v-for="(item,index) in rows.fileNameList" style='color: rgb(19,140,222);'>{{item}}</p>
					</view>
				</template>
			</CellChild>
		</view>
		<!-- 行程计划 -->
		<view class="formcard" id="add_two">
			<view class="bodtitle">
				<p><b>行程计划</b></p>
			</view>
			<view v-for="(item,index) in busiTripRouteEntityList" :key="index">
				<view class=" bod_cost">
					<view class="bus">
						<p>
							<b>{{item.empNm}}</b>
						</p>
					</view>
					<view style="white-space:nowrap;font-size: 32rpx;">
						
						</view>
				</view>
				
				<view class="hj">
					<view class="date_s" >
						<p v-for="(itemChild,indexChild) in item.tripChild" :key="indexChild">{{itemChild.routeStartDate.slice(0,10)}}</p>
						<!-- <p>2012-12-31</p> -->
					</view>
					<view style="flex:3;margin-left: 0rpx;display: flex;">
						<view style="height: 150rpx; "  >
							<el-steps finish-status="success" direction="vertical">
								<el-step icon="el-icon-circle-check" v-for="(itemChild,indexChild) in item.tripChild" :key="indexChild"></el-step>
								<!-- <el-step icon="el-icon-circle-check"></el-step> -->
							</el-steps>
						
						</view>
						<view class="sky" style="display: flex;flex-direction: column;justify-content: space-between;"  >
							<p v-for="(itemChild,indexChild) in item.tripChild" :key="indexChild">{{itemChild.startLocation}}<label><span>——</span>
									<image src="@/static/newimg/feiji.svg" class='fj'></image>
									<span>——</span>
								</label>{{itemChild.dest}}</p>
			<!-- 				<p>武汉武昌<label><span>——</span>
									<image src="@/static/newimg/feiji.svg" class='fj'></image>
									<span>——</span>
								</label>广州花都</p> -->
						</view>
					</view>
						
				</view>
			</view>
        
		
		</view>
		
		
		<!-- 费用预算 -->
		<view class="formcard" id="add_three">
			<view class="bodtitle">
				<p><b>费用预算</b></p>
			</view>
			
			<view v-for="(item,index) in busiTripdEntityList" :key="index">
				<view class=" bod_cost">
					<view class="bus">
						<p>
							<b>{{item.empNm}}</b>
						</p>
					</view>
					<view style="white-space:nowrap;font-size: 32rpx;">
						<label style="color: #666666;font-size: 26rpx;">申请</label>
						<b>￥{{thousandth(item.totAmt)}}</b>
						</view>
				</view>
				<view class="skyb">
					<label class="lab">{{item.budgetNo}}</label>
					<view class="skyblu">
						<span>费用科室</span>
						<p>{{item.subdeptNm}}</p>
					</view>
					<view class="skyblu">
						<span>预算号名称</span>
						<p>{{item.budgetNm}}</p>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		props:['listTrip', 'billno'],
		data() {
			return {
				isCancel:1,
				list1: [{
						name: '基本信息',
					},
					{
						name: '行程计划'
					},
					{
						name: '费用预算'
					},
				],
				items: [{
						value: '0',
						name: '是',
					},
					{
						value: '1',
						name: '否'
					}
				],
				cellshow:true,
				rows:[],
				addlist: [{
						tit: '申请单号',
						val: 'busiTripNo'
					},
					{
						tit: '申请人',
						val: 'empNm'
					},
					{
						tit: '员工编号',
						val: 'empNo'
					},
					{
						tit: '所在科室',
						val: 'subdeptNm'
					},
					{
						tit: '出差地域',
						val: 'destination'
					},
					{
						tit: '出差类型',
						val: 'tripType'
					},
					{
						tit: '出差日期',
						val: 'travelDate'
					},
					{
						tit: '是否入住酒店',
						val: 'isCheckHotel'
					},
					{
						tit: '同行人数',
						val: 'peersNum'
					},
					{
						tit: '是否携带电脑',
						val: 'isWithComputer'
					},
					
					{
						tit: '台数',
						val: 'computerStations'
					},
					{
						tit: '携带人',
						val: 'computerEmpNm'
					},
					{
						tit: '出差地址',
						val: 'tripObjective'
					},
					{
						tit: '出差事由',
						val: 'tripReasion'
					},
					
				],
				celllist:[
					{tit:'项目编号',val:'2022'},
					{tit:'投资大类',val:'新车型推进科'},
					{tit:'投资小类',val:'能扩'},
					{tit:'预算金额',val:'曲轴能扩新线'}
				],
				celllist1:[
					{tit:'子项目预算编号',val:'项目名称字段展示'},
					{tit:'预算金额',val:'2022-11-12'},
					{tit:'提单计划日期',val:'2022-11-12'},
					{tit:'提单计划金额',val:'666'},
					{tit:'合同计划日期',val:'2022-11-12'},
					{tit:'合同计划金额',val:'6,666.00'},
					{tit:'付款计划日期',val:'2022-11-12'},
					{tit:'付款计划金额',val:'6,666.00'},
				],
				travelAppLsit:{},//出差申请实例
				busiTripRouteEntityList:[],//行程实际
				busiTripdEntityList:[],//预算费用
			}
		},
		created(vm) {
			let _this = this;
			if(_this.listTrip){
				_this.processingDate(_this.listTrip);
			}else{
			    _this.applicationQuery(_this.billno);//加载出差申请详情页
			}

		},
		mounted() {
			var that = this;
			window.myvm = that;
			window.$urlFormVue = that;
		},
		methods: {
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//转办-工作流点击"确认转办"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//opinion:转办意见
			referredWorkflow(opinion) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef,callback) {
				callback("");
			},
			//提交单据
			sendWorkflow(btnDef, callback) {
				callback("");
			},
			checkbtn(item) { //切换tabs
				// console.log(item)
				if (item.index === 0) {
					this.commonApi.goAnchor('add_one')
				} else if (item.index === 1) {
					this.commonApi.goAnchor('add_two')
				} else if (item.index === 2) {
					this.commonApi.goAnchor('add_three')
				}
			},	
			applicationQuery(billsNo){
				let _this = this;
				_this.$lyRequest.get('/gateway/reim/mp/dbsap/busiTripmEntity/getBusiTripmForm.do',{
					billsNo:billsNo
				}).then(data=>{
					if(data.data.result == 1){
						_this.processingDate(data.data.rows);
						// console.log(data)
					}
				})
			},
			processingDate(data){
				let _this = this;
			    let listTrip = [];
				listTrip = JSON.parse(JSON.stringify(data));
				if(_this.listTrip){
				listTrip.destination = listTrip.destination=="0"?'境内':'境外';
				listTrip.tripType = listTrip.tripType=="0"?'工作出差':'培训出差';
				listTrip.isCheckHotel = listTrip.isCheckHotel=="0"?'否':'是';
				listTrip.isWithComputer = listTrip.isWithComputer=="0"?'否':'是';
				listTrip.travelDate = this.timeprocessing(listTrip.startDate,listTrip.endDate)
				}
				_this.travelAppLsit = JSON.parse(JSON.stringify(listTrip));
				if(_this.travelAppLsit.isCancel){
					_this.isCancel = _this.travelAppLsit.isCancel=='0'?1:0
				}
				let busiTripRouteEntityList=[],empNoList=[{empNo:_this.travelAppLsit.empNo,empNm:_this.travelAppLsit.empNm,tripChild:[]}];
				busiTripRouteEntityList = listTrip.busiTripRouteEntityList;
				_this.busiTripdEntityList = listTrip.busiTripdEntityList;
				busiTripRouteEntityList.forEach((item,index)=>{
					empNoList.push({
						empNo:item.empNo,
						empNm:item.empNm,
						tripChild:[]
					})
				});
				_this.busiTripRouteEntityList = _this.ObjectDeduplication(empNoList);
				_this.busiTripRouteEntityList.forEach((itemP,index)=>{
					busiTripRouteEntityList.forEach((itemC,index)=>{
						if(itemP.empNo == itemC.empNo){
							itemP.tripChild.push(itemC);
						}
					});
				});
			},
			timeprocessing(startTime,endTime){
				if(startTime&&startTime){
					return startTime.replace(/-/g,'.').slice(0,10)+'~'+endTime.replace(/-/g,'.').slice(0,10);
				}
						
			},
			ObjectDeduplication(tempArr) {
			    for (let i = 0; i < tempArr.length; i++) {
			        for (let j = i + 1; j < tempArr.length; j++) {
			            if (tempArr[i].empNo == tempArr[j].empNo) {
			                tempArr.splice(j, 1);
			                j--;
			                };
			                };
			            };
			    return tempArr;
			},
            thousandth(num) {
                if (!num) return '0.00';
                return (Number(num).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
            }
		}
	}
</script>

<style scoped lang="scss">
view{
	font-family: pf;
}
.bodcolor{
		span{
			color:#ff6400;
			font-size: 36rpx;
			padding-right: 20rpx;
		}
		label{
			color: #ff6400;
		}
	}
	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 35rpx 0;
		box-sizing: border-box;
		box-shadow: 5px -10rpx 5px 0px rgba(225, 225, 225, .4), ;
	
		.bottom_white1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
	
			.custom-styles {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
			}
	
			.custom-style {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				background-color: #007aff;
			}
		}
	}
	.skyb {
		width: 90%;
		margin: 20rpx auto;
		background: rgb(247, 251, 255);
		padding: 5rpx 10rpx;
	
		.lab {
			display: block;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #f1f1f1;
		}
	
		.skyblu {
			display: flex;
			flex-direction: row;
			padding: 20rpx 20rpx;
	
			span {
				width: 170rpx;
			}
	
			p {
				margin-left: 30rpx;
			}
		}
	}
</style>
